<template>
  <div style="height:100%;width:100%;position:relative;">
    <div class="pagetop" style="border:1px solid #CCC" ref="buttondiv">
      <template>
        <div style="width:100%;">
          <table class="top-table">
            <td align="right" width="60px">检验组</td>
            <td>
              <el-input v-model="labgroupInfo.labgroupname" :disabled="true"></el-input>
            </td>
            <td align="right" width="100px">默认报告单元</td>
            <td>
              <el-select v-model="rptunitname" placeholder="请选择报告单元" @change="LabReportUnitChange">
                <el-option v-for="item in LabReportUnitList" :key="item.rptunitid" :label="item.rptunitname"
                  :value="item.rptunitid">
                  <span style="float: left">{{ item.rptunitname }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.rptunitid }}</span>
                </el-option>
              </el-select>
            </td>
            <td align="right" width="60px">
              <el-checkbox v-model="coverflag"></el-checkbox>
            </td>
            <td style="width:150px;white-space: nowrap;">自动覆盖</td>
            <td style="align:right;" @click="SaveLabGroupRptItem">
              <el-button>存盘</el-button>
            </td>
            <td style="white-space: nowrap;">
              &nbsp;&nbsp;&nbsp;&nbsp;提示:双击左边和右边列表中行可实现删除和添加报告项目。
            </td>
          </table>
        </div>
      </template>
    </div>
    <div class="pagecenter">
      <div class="pagecenter-left">
        <vxe-table show-overflow ref="match_table" :data.sync="LabGroupRptItemList" class="mytable-style" height="auto"
          :loading="LabGroupRptItemLoading" :sort-config="{ trigger: 'cell' }" :keyboard-config="keyConfig"
          :keyboard-local-config="keyLocalConfig" border size="mini" show-header-overflow highlight-current-row
          highlight-hover-row resizable stripe header-align="center" :row-class-name="rowClassName"
          @cell-dblclick="DeleteRptItemCode" :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
          <vxe-table-column type="index" title="对照 ID" width="100" align="center"></vxe-table-column>
          <vxe-table-column field="rpt_itemname" title="当前工作组对应报告项目" width="300"></vxe-table-column>
          <vxe-table-column field="seq" :edit-render="{ name: 'input' }" title="序号" align="center"
            width="100"></vxe-table-column>
          <vxe-table-column field="rptunitid" title="默认检验报告单元" width="300">
            <template v-slot="{ row }">
              <template v-for="(option, index) in LabReportUnitList">
                <span v-if="row.rptunitid == option.rptunitid" :key="index">{{ option.rptunitname }}</span>
              </template>
            </template>
          </vxe-table-column>
        </vxe-table>
      </div>
      <div class="pagecenter-right">
        <vxe-table show-overflow ref="nomatch_table" class="mytable-style" height="auto" :loading="rptItemLoading"
          :sort-config="{ trigger: 'cell' }" :keyboard-config="keyConfig" :keyboard-local-config="keyLocalConfig"
          :data.sync="RptItemList" border size="mini" show-header-overflow highlight-current-row highlight-hover-row
          resizable stripe header-align="center" @cell-dblclick="addRptItemCode">
          <vxe-table-column field="rpt_itemname" title="报告项目 ID"></vxe-table-column>
        </vxe-table>
      </div>
    </div>
    <div>
      <el-dialog v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" style="padding:5px" title="提示"
        :visible.sync="coverDialogVisible" width="500px">
        <span>项目已经存在，你是否要覆盖?</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="coverLabGropRpt">确 定</el-button>
          <el-button @click="coverDialogVisible = false" :autofocus="true">取 消</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "LIS116",
  data() {
    return {
      LabGroupRptItemLoading: false,
      rptItemLoading: false,
      labgroupInfo: {},
      LabReportUnitList: [],
      rptunitid: '',
      rptunitname: '',
      coverflag: false,
      coverDialogVisible: false,
      LabGroupRptItemList: [],
      RptItemList: [],
      fRptItemList: [],
      RptItemCodeList: [],
      keyConfig: {
        isDel: true,
        isTab: true,
        isEdit: true
      },
      keyLocalConfig: {
        isArrow: true
      }
    };
  },
  created() {
    this.QueryLabGroup();
  },
  mounted() { },
  methods: {
    //查询检验组
    QueryLabGroup() {
      var userno = this.$tool.getSession(this.$tool.loginuserno);
      if (userno) {
        this.$tool
          .request({
            url: "LIS/LIS1/LIS116",
            method: "post",
            data: {
              action: "querylabgroup",
              userno: userno
            }
          })
          .then(response => {
            // 根据检验组查询 Lab_Group_RptItem 表的数据
            if (response.Data.length > 0) {
              this.labgroupInfo = response.Data[0];
              this.QueryLabReportUnitList(this.labgroupInfo.labgroupid);
              this.QueryLabGroupRptItem(this.labgroupInfo.labgroupid);
            }
          })
          .catch(e => {
            console.log("error", e);
          });
      }
    },
    // 查询默认报告单元
    QueryLabReportUnitList(labgroupid) {
      this.$tool
        .request({
          url: "LIS/LIS1/LIS116",
          method: "post",
          data: {
            action: "querylabreportunit",
            labgroupid: labgroupid
          }
        })
        .then(response => {
          // 根据检验组查询 Lab_Group_RptItem 表的数据
          if (response.Data.length > 0) {
            this.LabReportUnitList = response.Data;
          }
        })
        .catch(e => {
          console.log("error", e);
        });
    },
    // 默认报告单元
    LabReportUnitChange(e) {
      this.rptunitid = e;
      this.QueryLabRptunitItem(this.rptunitid);
    },
    // 已对照项目
    QueryLabGroupRptItem(labgroupid) {
      this.LabGroupRptItemLoading = true;
      this.$tool
        .request({
          url: "LIS/LIS1/LIS116",
          method: "post",
          data: {
            action: "querylabgrouprptitem",
            labgroupid: labgroupid
          }
        })
        .then(response => {
          if (response.LabGroupRptList.length > 0) {
            this.LabGroupRptItemList = response.LabGroupRptList;
          }
          this.LabGroupRptItemLoading = false;
        })
        .catch(e => {
          console.log("error", e);
          this.LabGroupRptItemLoading = false;
          this.rptItemLoading = false;
        });
    },
    // 未对照项目
    QueryLabRptunitItem(rptunitid) {
      this.rptItemLoading = true;
      this.$tool
        .request({
          url: "LIS/LIS1/LIS116",
          method: "post",
          data: {
            action: "querylabrptunititem",
            rptunitid: rptunitid,
            labgroupid: this.labgroupInfo.labgroupid
          }
        })
        .then(response => {
          this.RptItemList = response.RptItemList;
          this.fRptItemList = response.RptItemList;
          this.rptItemLoading = false;
        })
        .catch(e => {
          console.log("error", e);
          this.rptItemLoading = false;
        });
    },
    // 添加对照
    addRptItemCode({ row }) {
      // 判断是否自动覆盖
      if (this.coverflag) {
        this.addRptItem(row);
      } else {
        var ishasflag = false;
        this.$refs.match_table.tableFullData.forEach((element, index) => {
          if (element.rpt_itemcode == row.rpt_itemcode) {
            ishasflag = true;
          }
        });
        if (ishasflag) {
          this.coverDialogVisible = true;
        } else {
          this.addRptItem(row);
        }
      }
    },
    // 添加对照方法
    addRptItem(row) {
      var that = this;
      var item = {
        labgroupid: that.labgroupInfo.labgroupid,
        rpt_itemcode: row.rpt_itemcode,
        rptunitid: that.rptunitid,
        rpt_itemname: row.rpt_itemname,
        seq: that.$refs.match_table.tableFullData.length > 0 ? (Math.floor(that.$refs.match_table.tableFullData[that.$refs.match_table.tableFullData.length - 1].seq / 10) + 1) * 10 : 10
      }
      that.$refs.match_table.tableFullData.forEach((element, index) => {
        if (element.rpt_itemcode == row.rpt_itemcode) {
          that.$refs.match_table.remove(element);
        }
      });
      that.$refs.match_table.insertAt(item, -1);
      // 删除已对照报告项目
      that.RptItemList = this.RptItemList.filter(e => item.rpt_itemcode != e.rpt_itemcode);
    },
    coverLabGropRpt() {
      this.coverDialogVisible = false;
      var row = this.$refs.nomatch_table.getCurrentRow();
      this.addRptItem(row);
    },
    // 取消对照
    DeleteRptItemCode(row) {
      var item = this.$refs.match_table.getCurrentRow();
      this.$refs.match_table.remove(item);
      var RptItemCode = [];
      this.RptItemList.forEach(element => {
        RptItemCode.push(element.rpt_itemcode);
      });
      this.RptItemCodeList = RptItemCode;
      if (item.rptunitid == this.rptunitid) {
        if (this.fRptItemList.length > 0) {
          this.fRptItemList.forEach(element => {
            if (element.rpt_itemcode != item.rpt_itemcode) {
              this.RptItemList.push({
                rpt_itemcode: item.rpt_itemcode,
                rpt_itemname: item.rpt_itemname
              });
              this.RptItemCodeList = this.RptItemList;
            }
          });
        } else {
          this.RptItemList.push({
            rpt_itemcode: item.rpt_itemcode,
            rpt_itemname: item.rpt_itemname
          });
          this.RptItemCodeList = this.RptItemList;
        }
      }
    },
    rowClassName({ row, rowIndex }) {
      let isDirty = this.$refs.match_table.hasRowChange(row);
      if (isDirty) {
        return "row-modify";
      }
      if (this.$refs.match_table.hasRowInsert(row)) return "row-new";
    },
    CancelMatch({ row, rowIndex }) {
      this.CancelMatch1(row, rowIndex);
    },
    // 存盘
    SaveLabGroupRptItem() {
      // 排序
      this.$refs.match_table.tableFullData.sort((a, b) => {
        return a.seq - b.seq;
      });
      this.$refs.match_table.tableFullData.forEach((element, index) => {
        element.seq = (index + 1) * 10;
      });
      console.log(this.$refs.match_table.getRecordset())
      // 保存
      this.$tool
        .request({
          url: "LIS/LIS1/LIS116",
          method: "post",
          data: {
            action: "savelabgrouprptitem",
            upt: this.$refs.match_table.getRecordset()
          }
        })
        .then(response => {
          if (response.errcode != "1") {
            this.$message({
              message: "保存失败！" + response.errmsg,
              type: "warning"
            });
          } else {
            this.$message({
              message: response.errmsg,
              type: "success"
            });
            this.QueryLabGroup();
          }
        })
        .catch(e => { });
    },
  }
};
</script>

<style scoped>
.pagetop {
  width: 100%;
  height: 35px;
  display: -webkit-box;
  -webkit-box-pack: left;
  -webkit-box-align: center;
  border: 1px solid #ccc;
  position: absolute;
  z-index: 99;
  font-size: 12px;
}

.top-table tr td {
  padding: 0px 2px 0px 5px;
}

.pagecenter {
  position: absolute;
  top: 37px;
  width: 100%;
  left: 0;
  right: 0;
  bottom: 3px;
  overflow: auto;
  display: flex;
}

.pagecenter-left {
  flex: 3;
  margin-right: 3px;
}

.pagecenter-right {
  flex: 1;
}

/deep/.middle-center tr td div .el-input__inner {
  border: 1px solid rgba(255, 254, 254, 0) !important;
  background-color: rgba(255, 254, 254, 0) !important;
}

/deep/ .mytable-style.vxe-table .vxe-body--column.col-orange {
  background-color: #ccc;
}

/deep/ .el-input.is-disabled .el-input__inner {
  color: #000000 !important;
}</style>
